<template>
	<div class="login">
		<v-header></v-header>
		<div class="loginForm">
			<form id="loginForm">
				<input type="tel" id="phone" name="phone" v-model="formData.phone" maxlength="11" placeholder="请输入手机号">
				<div class="input-group">
					<input class="codeInput" id="code" name="code" v-model="formData.code" type="tel" maxlength="6" placeholder="请输入验证码">
					<span class="addOn">
            <button class="btn btn-text" type="button" @click="sendVcode(formData)">
              <span v-show="show">发送验证码</span>
					<span v-show="!show" class="count">{{count}}s</span>
					</button>
					</span>
				</div>
				<button class="btn btn-info login-btn" type="button" @click="checkForm">登录</button>
			</form>
		</div>
	</div>
</template>

<script>
	import { getSms, login } from 'api'
	import vHeader from 'components/v-header/v-header'
	const TIME_COUNT = 60
	export default {
		name: 'loginForm',
		data() {
			return {
				formData: {
					phone: null,
					code: null
				},
				show: true,
				count: '',
				timer: null,
				user: {}
			}
		},
		methods: {
			sendVcode() {
				if(!this.formData.phone) {
					this.$message({
						message: '请输入手机号',
						type: 'error'
					})
					return false;
				}
				getSms(this.formData.phone).then((res) => {
					if(!this.timer) {
						this.count = TIME_COUNT
						this.show = false
						this.timer = setInterval(() => {
							if(this.count > 0 && this.count <= TIME_COUNT) {
								this.count--
							} else {
								this.show = true
								clearInterval(this.timer)
								this.timer = null
							}
						}, 1000)
					}
					this.$message({
						message: res.data,
						type: 'success'
					})
				}).catch((error) => {
					if(error.response) {
						this.$message({
							message: error.response.data.message,
							type: 'error'
						})
					} else {
						this.$message({
							message: "请求异常",
							type: 'error'
						})
					}
				})
			},
			checkForm() {
				if(!this.formData.phone) {
					this.$message({
						message: '手机号码错误',
						type: 'error'
					})
					return false;
				}
				if(!this.formData.code) {
					this.$message({
						message: '验证码不能为空',
						type: 'error'
					})
					return false;
				}
				this.submitLogin();
			},
			submitLogin() {
				login(this.formData).then((res) => {
					this.$store.commit('SET_TOKEN', res.data)
					this.$message({
						message: '登陆成功',
						type: 'success'
					})
					this.$router.push({
						name: 'index'
					})
				}).catch((error) => {
					if(error.response) {
						this.$message({
							message: error.response.data.message,
							type: 'error'
						})
					} else {
						this.$message({
							message: "登录异常",
							type: 'error'
						})
					}
				})
			}
		},
		components: {
			vHeader
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../common/sass/var';
	.login {
		padding-top: 50px;
	}
	
	.loginForm {
		margin-top: 40px;
		padding: 20px;
		.codeInput {
			padding-right: 120px;
		}
		.btn-text {
			font-size: 14px;
		}
		.count {
			color: lighten($color-light-gray, 30%);
		}
		.input-group {
			margin-bottom: 40px;
		}
	}
</style>